<template>
    <div class="box">
        <fou-dialog :title="'選擇學生'" v-model:dialogValue="studentDia" :width="'75%'">
            <template #content="">
                    <!-- <el-button color="#081F42" :disabled="delsable" @click="choice()">多選{{num}}</el-button> -->
                    <ProTable
                    :data="tableData"
                    :page="page"
                    :column="column"
                    :rowControl="[]"
                    :elProps="schoolProps"
                    :disabled="[]"
                    :controlWidth="schoolWidth"
                    @page-change="onPageChange"
                    @pageRefresh="pageRefresh"
                    
                    >
                    <!-- <template #default="{ row, propname }">
                        <div  v-if="propname === 'school' || propname === 'cate' ">
                              {{row[propname] && row[propname].name ? row[propname].name : row[propname]}}
                        </div>
                        <div v-if="propname === 'card_number'">
                             <el-tag v-if="row[propname]" type="success">已綁定</el-tag>
                            <el-tag  v-if="!row[propname]" type='warning'>未綁定</el-tag>
                        </div>
                    </template> -->
                    <template #search_operate>
                        <el-table-column  fixed="right" min-width="200px" >
                            <template #header>
                                    <el-input @keyup.enter="getSearch" clearable v-model="search" placeholder="搜索(內容)" class="input">
                                        <template #append>
                                        <el-button icon="Search" @click="getSearch"></el-button>
                                        </template>
                                    </el-input>
                            </template>
                            <template #default="scope">
                                <el-button  color="#081F42"  @click="handleSelect(scope.$index, scope.row)" >選擇</el-button >
                            </template>
                        </el-table-column>
                    </template>
                    </ProTable>
            </template>
        </fou-dialog>
    </div>
    </template>
    
    <script setup>
    import { ref ,reactive} from 'vue' 
    import {SchoolList} from '@/http/index.js'
    import {schoolProps,schoolWidth} from './notes.js'
    import { loading ,closeLoading} from '@/common/function.js'
    
    const emit = defineEmits(['update'])
    const handleSelect=(index,row)=>{
     emit('update',row)
     studentDia.value = false
    }
    
    const page = reactive({current_page: 1,per_page: 10,total: 10,page_size: [10, 20, 30]})
    const search = ref('')
    const getSearch = async()=>{
        obj.name = search.value
        await init()
    }
    const onPageChange = async({ e, type }) => {
      console.log(e, type);
      if (type == "current") {
        obj.page = e;
      }
      if (type == "size") {
        obj.page = 1
        obj.limit = e;
      }
        await init()
    };
    const pageRefresh = async () => {
      obj.page = 1
      await init();
    };
    
    const obj = reactive({
      page: page.current_page,
      limit: page.per_page,
      name: '',
      status:1,
      time:'',
    });
    const studentDia = ref(false)
    const tableData = ref([])
    const init = async()=>{
        loading()
        const data = await SchoolList(obj)
        if (data.code == 200 ) {
            tableData.value = data.data.data
            page.total = data.data.total
            page.current_page = data.data.current_page
            page.per_page = data.data.per_page
        }
        closeLoading()
        studentDia.value = true
    }
    const column = {
        name: "學校",
        address: "地址",
        mobile: "手機號碼",
        fax: "傳真",
        statuss: "狀態",
        warehouse: "倉庫名字",
    }
    defineExpose({
    init
    })
    </script>
    
    <style lang='less'  scoped>
    .box{
      :deep(.el-dialog__body){
      padding:0 20px!important;
      }
      :deep(.el-dialog__footer){
        padding: 0 !important;
    
      }
      :deep(.tableflex[data-v-0985d712]){
        margin-top: 15px;
      }
    }
    </style>